<template>
  <div>
    <a-card style="height: 400px;">
      <div slot="title" id="div">
        <span>{{title}}</span>
        <span>
          <a  type="text" @click="see()"><img class="button" src="../../img/quanbu.png"></a>
        </span>
      </div>
      <div>
        <a-row v-for="(item,index) in tasks" :key="'item'+index" style="margin-top: 10px">
          <span class="dot"></span>
          <span>{{item.name}}<span style="color: #40a9ff">创建于</span>{{item.createTime}}</span>
<!--          <span :title="item.userName">{{item.userName}}在{{item.createTime}}申请了一个{{item.remark}}的{{item.modelName}}</span>-->
          <a color="orange" style="margin-left: 10px" class="tag">
            <router-link :to="{ path: path }" ><img class="tag" src="../../img/daiban1.png"></router-link>
          </a>
        </a-row>
      <!--  <a-row v-for="(item,index) in announcements" :key="'item'+index" style="margin-top: 10px"  v-if="item.readFlag=='0'">
          <span class="dot"></span>
          <span :title="item.userName">系统在{{item.sendTime}}向您发送了一条消息，请注意查看！</span>
          <a-tag color="orange" style="margin-left: 10px">系统消息</a-tag>
        </a-row>-->
      </div>
      <todo-more ref="TodoMore"/>
    </a-card>
  </div>

</template>
<script>
  import {getTodos} from '@/api/home.js'
  import{getTodoTaskList} from '@/api/activiti'
  import{getAnnouncementList} from '@/api/api'
  import TodoMore from '@/views/components/tools/todo-more'

  export default {
    components: {
      TodoMore
    },

    data() {
      return {
        title: '待办事项',
        showTableHeader: true,
        tableData: [],
        tasks:[],
        announcements:[],
        path: '/flow/taskList'

      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        let that = this
       that.loadTask()
        that.loadAnnouncement()
  /*      let data = {
          total: 20,
          content: [{
            id: 1,
            user: '马达芸',
            type: 1,
            name: '10点30分于810室召开关于科室4月工作例会',
            content: '10点30分于810室召开关于科室4月工作例会',
            percent: 45,
            icon: 'car',
            tag: '待办',
            read: true,
            imageUrl: 'images/index/ship.png',
            date: '12-07',
            unreadCount: 3,
            time: '11:30'
          }
          ]
        }*/
      /*  that.tableData = [].concat(data.content).slice(0, 4)*/

        /**
         * @Author:     风中的那朵云
         * @Description:  待办数据接口
         * @Date:    2020/5/6
         * @Version:    1.0
         */
   /*     getTodos()
           .then(({ data, status }) => {
             that.tableData = [].concat(data.content).slice(0, 8)
          })*/
      },
      loadTask() {
        const vm = this
        getTodoTaskList().then(res => {
          vm.tasks = [].concat(res.result.records).slice(0,10)
          console.log(vm.tasks)
        })
      },
      see(){
        this.$refs.TodoMore.show()
      },
      loadAnnouncement(){
        const vm=this
        getAnnouncementList().then(res => {
          vm.announcements = [].concat(res.result.records).slice(0,2)

        })
      }
    }
  }
</script>
<style scoped>
  .rightAngle {
    border-radius: 0px 0px 0px 0px;
  }
  .ant-card-bordered {
    border: 0px;
  }
  .ant-card {
/*    color: rgba(0, 0, 0, 0.65);*/
    background: transparent;
    background-image: url("../../img/daibantu.png");
    background-size:100% 100%;
    background-repeat: no-repeat;

  }
  .dot {
    background-image:url("../../img/xuhao.png");
    height: 6px;
    width: 6px;
    display: inline-block;
    position: relative;
    margin-left: 15px;
    top: -2px;
  }
  .tag{
    width: 80px;
    height:25px;
    float:right;
  }
  .button{
    width: 90px;
    height: 30px;
    float: right;
     top: 1px;
  }
  #div{
   float: top;
  }

/*
  .task{
    height: 200px;
    width: 500px;
    border:1px solid #F2F1E6;
  }
  .tongzhi{
    height: 100px;
    width: 500px;
    border:1px solid #F2F1E6;
    margin-top: 2px;
  }
*/

</style>
